<template>
<div class="pay-panel">
  <!-- 支付方式 -->
  <van-popup v-model="showPay" class="pay-panel-wrap" :close-on-click-overlay='false'>
    <h5 class="hd">
        <span class="title">请输入支付密码</span>
        <span class="close" @click="close">关闭</span>
      </h5>
    <div class="bd">
      <span class="pay-name">手机充值</span>
      <span class="pay-price">￥29.97</span>
      <van-cell-group class="pay-type">
        <van-cell value="金币支付" is-link @click="toPayType"/>
        <!-- <van-cell value="微信支付"/> -->
      </van-cell-group>
    </div>
    <div class="ft">
      <!-- 密码输入框 -->
      <van-password-input :value="pass" @focus="showKeyboard = true" />
    </div>
  </van-popup>
  <!-- 数字键盘 -->
  <van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" class="pay-panel-footer" />
</div>
</template>

<script>
export default {
  props: ['showPay', 'showKeyboard'],
  data() {
    return {
      pass: ''
    }
  },
  methods: {
    onInput(key) {
      let that = this;
      this.pass = (this.pass + key).slice(0, 6);
      let paw = '123456'
      let len = this.pass.length
      if (len == 6 && this.pass != paw) {
        this.$emit('closePanel');
        const toast1 = this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true, // 禁用背景点击
          message: '支付中...'
        });
        let second = 3;
        const timer = setInterval(() => {
          second--;
          if (second) {
            toast1.message = `支付中...`;
          } else {
            clearInterval(timer);
            toast1.clear();
            const toast2 = this.$dialog.confirm({
              title: '',
              confirmButtonText:'重试',
              cancelButtonText: '忘记密码',
              message: '支付密码错误,请重试'
            }).then(() => {
               this.$emit('openPanel')
            }).catch(() => {
              console.log('忘记密码');
            });
          }
        }, 1000);
        this.pass = '';
      } else if (len == 6 && this.pass == paw) {
        this.$emit('closePanel');
        const toast2 = this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true, // 禁用背景点击
          message: '支付中...'
        });
        let second = 3;
        const timer = setInterval(() => {
          second--;
          if (second) {
            toast2.message = `支付中...`;
          } else {
            clearInterval(timer);
            toast2.clear();
            this.$toast.success({duration: 1000,message:'支付成功!'})
          }
        }, 1000);
        this.pass = '';
      }
    },
    onDelete() {
      this.pass = this.pass.slice(0, this.pass.length - 1);
    },
    close() {
      this.pass = '';
      this.$emit('closePanel');
    },
    toPayType() {
      this.$emit('closePanel');
      this.$emit('openPayTypePanel')
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.pay-panel {
    &-wrap {
        border-radius: 5px;
        box-sizing: border-box;
        width: 80%;
        .hd {
            height: px2rem(80px);
            line-height: px2rem(60px);
            width: 100%;
            padding: px2rem(10px);
            @include font-dpr(15px);
            border-bottom: 1px solid #278b52;
            // line-height: px2rem(45px);
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            > .title {
                display: inline-block;
                width: 90%;
                text-align: center;
                font-weight: bolder;
                justify-content: center;
            }
            > .close {
                display: inline-block;
                text-align: right;
                @include font-dpr(14px);
                cursor: pointer;
            }
        }
        .bd {
            display: flex;
            flex-direction: column;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            align-content: center;
            .pay-name {
                margin: px2rem(25px) 0;
                @include font-dpr(14px);
            }
            .pay-price {
                @include font-dpr(24px);
                font-weight: bolder;
            }
            .pay-type {
                width: 90%;
            }
            .van-cell {
                padding: 10px !important;
                line-height: px2rem(25px) !important;
            }
        }
        .ft {
            padding: px2rem(20px) 0;
            .van-password-input__security {
                height: px2rem(60px) !important;
            }
        }
        ,
        .van-popup {
            top: 35% !important;
        }
    }
    &-footer {}
}

.van-modal {
    z-index: 2000 !important;
}
.van-number-keyboard,
.van-popup {
    z-index: 2002 !important;
}
</style>
